<template>
  <div class="consultation-container medical-theme">
    <h1><i class="el-icon-first-aid"></i> 医疗保险专业咨询</h1>
    
    <div class="chat-container">
      <div class="message-history">
        <div v-for="(msg, index) in messages" :key="index" 
             :class="['message', msg.role]">
          <div class="message-header">
            <span v-if="msg.role === 'user'">您:</span>
            <span v-else><i class="el-icon-s-check"></i> 医保顾问:</span>
          </div>
          <div class="message-content" v-html="formatMessage(msg.content)"></div>
          <div v-if="msg.sources && msg.sources.length" class="message-sources">
            <el-tag v-for="(source, i) in msg.sources" :key="i" type="info" size="mini">
              {{ source }}
            </el-tag>
          </div>
        </div>
        
        <div v-if="loading" class="loading-indicator">
          <el-icon class="is-loading"><el-icon-loading /></el-icon>
          <span>正在分析您的医疗问题...</span>
        </div>
      </div>
      
      <div class="input-area">
        <el-input
          v-model="userInput"
          type="textarea"
          :rows="3"
          placeholder="请输入您的医疗保险相关问题，例如：哪些药品可以报销？"
          @keyup.enter.native="sendMessage"
        ></el-input>
        <div class="quick-questions">
          <h4>常见问题快速提问:</h4>
          <el-tag
            v-for="(question, idx) in quickQuestions"
            :key="idx"
            @click="quickAsk(question)"
          >
            {{ question }}
          </el-tag>
        </div>
        <el-button 
          type="primary" 
          @click="sendMessage"
          :loading="loading"
          class="send-button"
        >
          发送咨询
        </el-button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import axios from 'axios'
import { ElMessage } from 'element-plus'

const userInput = ref('')
const loading = ref(false)
const messages = ref([
  {
    role: 'assistant',
    content: '您好！我是医疗保险AI顾问，可以为您解答关于医保报销范围、定点医院、特殊疾病保障等问题。请问您想了解什么？',
    sources: []
  }
])

const quickQuestions = ref([
  '医保报销比例是多少？',
  '哪些慢性病可以申请特殊门诊？',
  '异地就医如何办理备案？',
  '医保卡可以给家人使用吗？'
])

const formatMessage = (text) => {
  // 高亮显示条款引用
  return text.replace(/【条款[0-9]+】/g, '<span class="clause-highlight">$&</span>')
}

const sendMessage = async () => {
  if (!userInput.value.trim()) {
    ElMessage.warning('请输入咨询问题')
    return
  }
  
  try {
    loading.value = true
    messages.value.push({
      role: 'user',
      content: userInput.value,
      sources: []
    })
    
    const response = await axios.post('http://127.0.0.1:8000/ai/session/', {
      insurance_type: 'medical',
      question: userInput.value
    })
    
    messages.value.push({
      role: 'assistant',
      content: response.data.answer,
      sources: response.data.sources
    })
    
    userInput.value = ''
  } catch (error) {
    ElMessage.error('咨询失败: ' + error.message)
  } finally {
    loading.value = false
  }
}

const quickAsk = (question) => {
  userInput.value = question
  sendMessage()
}
</script>

<style scoped>
.consultation-container {
  max-width: 800px;
  margin: 0 auto;
  padding: 20px;
}

.medical-theme {
  background-color: #f0f9ff;
  border-radius: 10px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

h1 {
  color: #1a73e8;
  text-align: center;
  margin-bottom: 20px;
}

.chat-container {
  background: white;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

.message-history {
  min-height: 400px;
  max-height: 500px;
  overflow-y: auto;
  margin-bottom: 20px;
  padding: 10px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.message {
  margin-bottom: 15px;
  padding: 10px;
  border-radius: 4px;
}

.message.user {
  background-color: #f5f5f5;
  margin-left: 20%;
}

.message.assistant {
  background-color: #e8f4fd;
  margin-right: 20%;
}

.message-header {
  font-weight: bold;
  margin-bottom: 5px;
  color: #1a73e8;
}

.message-content {
  line-height: 1.6;
}

.message-sources {
  margin-top: 5px;
}

.clause-highlight {
  color: #1a73e8;
  font-weight: bold;
}

.input-area {
  margin-top: 20px;
}

.quick-questions {
  margin: 10px 0;
}

.quick-questions h4 {
  margin-bottom: 8px;
  color: #666;
}

.quick-questions .el-tag {
  margin-right: 8px;
  margin-bottom: 8px;
  cursor: pointer;
}

.loading-indicator {
  text-align: center;
  padding: 10px;
  color: #666;
}

.send-button {
  margin-top: 10px;
  width: 100%;
}
</style>